<template>
    <div class="outpatient-list">
        <h2 class="title">{{ $route.meta.title }}</h2>
        <div class="filter">

          <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="药品名称" prop="name">
              <el-input
                v-model="queryParams.name"
                placeholder="请输入药品名称"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>

            <el-form-item label="药品类型" prop="name">
              <el-select v-model="queryParams.type" placeholder="请选择药品类型">
                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>

          </div>
      <el-row v-if="isShow" :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
          >新增</el-button>
        </el-col>
      </el-row>
        <div class="table">
            <el-table
                :data="tableData"
                border
                fit
                style="width: 100%"
                header-cell-class-name="table-header-cell"
                :class="tableData.length === 0 ? 'table-empty' : ''" v-loading="loading" @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column
                label="序号"
                type="index"
                width="80">
              </el-table-column>
              <el-table-column label="药品成分名称" align="center" prop="name" />
              <el-table-column label="抗菌使用级别" align="center" prop="level">
                <template slot-scope="scope">
                  <span v-if="scope.row.level === 0">非限制使用级</span>
                  <span v-if="scope.row.level === 1">限制使用级</span>
                  <span v-if="scope.row.level === 2">特殊使用级</span>
                </template>
              </el-table-column>
              <el-table-column label="版本" align="center" prop="version" />
              <el-table-column label="药品类型" align="center" prop="type" >
                <template slot-scope="scope">
                  <span v-if="scope.row.type === 1">抗菌药物</span>
                  <span v-if="scope.row.type === 2">精麻药物</span>
                </template>
              </el-table-column>
                <el-table-column v-if="isShow" label="操作" width="300">
                    <template slot-scope="scope">
                        <div class="operation">
                            <div   @click="handleEdit(scope)">编辑</div>
                            <div style="margin-left: 20%;" @click="handleDelete(scope.row)">删除</div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
        <el-dialog v-if="editDialogVisible" :title="this.title" :visible.sync="editDialogVisible" width="30%"
            :before-close="handleClose" class="edit-dialog" top="40vh">
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <div class="edit-box">
              <div class="name">
                <div class="label">药品名称</div><el-input v-model="form.name"></el-input>
              </div>
              <div class="useType">
                <div class="label">选择使用级别</div> <el-select v-model="form.level" placeholder="请选择使用级别" allow-clear>
                <el-option
                  v-for="item in levelOptions"
                  :key="item.value*1"
                  :label="item.label"
                  :value="item.value*1">
                </el-option>
              </el-select>
              </div>
              <div class="drugType">
                <div class="label">选择药品类型</div><el-select v-model="form.type" placeholder="请选择药品类型" allow-clear>
                <el-option
                  v-for="item in typeOptions"
                  :key="item.value*1"
                  :label="item.label"
                  :value="item.value*1">
                </el-option>
              </el-select>
              </div>
              <div class="version">
                <div class="label">版本</div>
                <el-input v-model="form.version" placeholder="请输入版本号" />
              </div>
              <div class="submit" @click="submitForm">保存修改</div>
            </div>
          </el-form>

        </el-dialog>
    </div>
</template>
<script>
  import { getInfo } from "@/api/login";
  import { listDrug} from "@/api/his/drug";
  import {addDrug, delDrug, updateDrug} from "../../../../api/his/drug";
export default {
    name: 'HospitalList',
    data() {
        return {
          // 遮罩层
          loading: true,
          // 导出遮罩层
          exportLoading: false,
          // 选中数组
          ids: [],
          isShow: false,
          // 非单个禁用
          single: true,
          // 非多个禁用
          multiple: true,
          // 显示搜索条件
          showSearch: true,
          // 总条数
          total: 0,
          // 【请填写功能名称】表格数据
          dockorList: [],
          // 弹出层标题
          title: "",
          // 是否显示弹出层
          open: false,
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            name: null,
            level: null,
            version: null,
            whitelist: null,
            blacklist: null,
            type: null
          },
          // 表单参数
          form: {
            level: '请选择使用级别',
            type: '请选择药品类型'
          },
          levelOptions: [
            {value: '0', label: '非限制使用级' },
            {value: '1', label: '限制使用级' },
            {value: '2', label: '特殊使用级' }
          ],
          typeOptions: [
            {value: '1', label: '抗菌药物' },
            {value: '2', label: '精麻药品' },
          ],
          // 表单校验
          rules: {
            name: [
              { required: true, message: "药品名称不能为空", trigger: "blur" }
            ],
            useType: [
              { required: true, message: "选择使用级别不能为空", trigger: "blur" }
            ],
            drugType: [
              { required: true, message: "选择药品类型不能为空", trigger: "blur" }
            ],
            version: [
              { required: true, message: "版本不能为空", trigger: "blur" }
            ]
          },
            keyword: '',
            editDialogVisible: false,
            editData: null,
            drugType: null,
            drugOptions: [],
            useTypeOptions: [],
            versionOptions: [],
            tableConfig: [
                {
                    prop: 'order',
                    label: '序号',
                },
                {
                    prop: 'name',
                    label: '药品成分名称',
                },
                {
                    prop: 'useType',
                    label: '抗菌使用级别',
                },
                {
                    prop: 'version',
                    label: '版本',
                },
                {
                    prop: 'drugType',
                    label: '药品类型',
                },
            ],
            tableData: [
                {
                    order: '01',
                    name: '米卡分静',
                    useType: '使用特殊级',
                    version: '2012版抗菌药',
                    drugType: '抗菌药物/精神药物',
                },
                {
                    order: '02',
                    name: '米卡分静',
                    useType: '使用特殊级',
                    version: '2012版抗菌药',
                    drugType: '抗菌药物/精神药物',
                },
            ]
        }
    },
  created() {
    this.getList();
    this.getRoles();
  },
    methods: {
      getRoles(){
        getInfo().then(res => {
          if(res.roles && res.roles.includes("admin")){
            this.isShow =true;
          }
        })
      },
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('是否确认删除？').then(function() {
          return delDrug(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateDrug(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.editDialogVisible = false
                this.getList();
              });
            } else {
              addDrug(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.editDialogVisible = false
                this.getList();

              });
            }
          }
        });
      },
      getList() {
        this.loading = true;
        listDrug(this.queryParams).then(response => {
          this.tableData = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.queryParams.type='';
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
        handleEdit(scope) {
            this.form = scope.row
          this.title = '编辑信息'
            this.editDialogVisible = true
        },
      handleAdd() {
        this.form = {
          name: '',
          useType: '',
          version: '',
          drugType: '',
        };
        this.title = '添加信息'
        this.editDialogVisible = true
      },
        handleClose() {
            this.editDialogVisible = false
            this.editData = null
        }
    }
}
</script>
<style scoped lang="scss">
.outpatient-list {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.filter {
    display: flex;
    align-items: center;

    .el-select {
        width: 150px;
        height: 47px;
        margin-right: 11px;

        ::v-deep input {
            width: 150px;
            height: 47px;
        }
    }

    .search-input {
        width: 264px;
        height: 47px;
        background: #FFFFFF;
        border-radius: 5px;

        ::v-deep input {
            line-height: 45px;
            height: 47px;
            display: inline-block;
        }

        ::v-deep .el-input__icon {
            line-height: 45px;
            height: 45px;
            vertical-align: -0.15em;
            color: #4373F1;
        }
    }
}
.title {
    font-size: 26px;
    color: #4B4B4B;
    font-weight: bold;
    margin: 18px 0 24px;
}
.table {
    flex: 1;
    background-color: #fff;
    margin: 13px 0 16px;

    ::v-deep .table-header-cell {
        background-color: #EBEFF8;
        padding-left: 21px;
        font-weight: 500;
        font-size: 16px;
        color: #414141;
    }
    .el-table {
        height: 100%;
    }
    ::v-deep .el-table__cell {
        padding-left: 21px;
        font-weight: 500;
        font-size: 16px;
        color: #414141;
    }
    :v-deep .el-table__body-wrapper {
        height: 100%;
    }
    :v-deep .el-table__empty-block {
        height: 100%;
    }
    .operation {
        display: flex;
        align-items: center;
        height: 100%;

        .view,
        .edit,
        .delete {
            cursor: pointer;
            font-weight: 500;
            font-size: 16px;
            color: #414141;
            height: 16px;
            line-height: 16px;
            padding-left: 20px;
            background-repeat: no-repeat;
            background-position: 0 center;
            margin-right: 20px;
            user-select: none;
        }

        .view {
            background-image: url('~@/assets/images/table/view.png');
        }

        .edit {
            background-image: url('~@/assets/images/table/edit.png');
        }

        .delete {
            background-image: url('~@/assets/images/table/delete.png');
            margin-right: 0;
        }
    }
}

.edit-box {
    display: flex;
    flex-direction: column;
    align-items: center;

    ::v-deep .el-dialog__footer {
        display: none;
    }

    .submit {
        width: 164px;
        height: 56px;
        background: #4373F1;
        border-radius: 5px;
        user-select: none;
        line-height: 56px;
        color: #fff;
        text-align: center;
        margin-top: 22px;
        cursor: pointer;
    }

    .label {
        width: 130px;
    }

    .name,
    .drugType,
    .version,
    .useType {
        display: flex;
        align-items: center;
        white-space: nowrap;
        width: 410px;
        height: 56px;
        line-height: 16px;
        background: rgba(238, 238, 238, 0.38);
        border-radius: 5px;
        border: 1px solid #E5E5E5;
        font-weight: bold;
        font-size: 16px;
        color: #505050;
        padding: 20px 22px;
        margin-bottom: 13px;

        .el-select {
            width: 100%;
        }

        ::v-deep input {
            border: none;
            background: rgba(238, 238, 238, 0.38);
        }
    }
}

::v-deep .el-dialog:not(.is-fullscreen) {
    margin-top: 20vh !important;
}
</style>
